<template>
    <div class="incubatorNum">
        <Chart id="incubatorNum" :option="option" v-bind="$attrs"></Chart>
    </div>
</template>
  
<script>
import Chart from "@/components/chart/chart.vue";
import { getChartData } from "@/api/echarts";

export default {
    name: "incubatorNum",
    components: { Chart },
    props: [],
    data() {
        return {
            option: {},
        };
    },
    mounted() {
        getChartData(
            { "custom_chart_id": "21" }
        ).then(res => {
            this.chartData = res.data.data;
            this.setOption();
        });
    },
    methods: {
        setOption() {
            this.option = {
                dataset: [
                    {
                        dimensions: ['name', 'value1', 'value2', 'value3'],
                        source: this.chartData
                    },

                ],
                boundaryGap: false,
                legend: {
                    data: ["在途数量", "待返箱数量", "回箱待签收数量"],
                },
                xAxis: {
                    type: 'category',

                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    }
                    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: "在途数量",
                        // data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        label: {
                            show: true,
                            position: "top"
                        },
                        // itemStyle: {
                        //     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //         {
                        //             offset: 0,
                        //             color: 'rgb(152, 200, 249)'
                        //         },
                        //         {
                        //             offset: 1,
                        //             color: 'rgb(64, 158, 255)'
                        //         }
                        //     ])
                        // },
                    },
                    {
                        name: "待返箱数量",
                        // data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        label: {
                            show: true,
                            position: "top"
                        },

                        // itemStyle: {
                        //     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //         {
                        //             offset: 0,
                        //             color: 'rgb(152, 200, 249)'
                        //         },
                        //         {
                        //             offset: 1,
                        //             color: 'rgb(64, 158, 255)'
                        //         }
                        //     ])
                        // },
                    },
                    {
                        name: "回箱待签收数量",
                        type: 'bar',
                        label: {
                            show: true,
                            position: "top"
                        },
                    }
                ]
            };
        },
    },
};
</script>
<style lang="scss" scoped>
.wrapper {}
</style>
  